<template>
    <div id="loginPage">
        <div>
            <mu-row>
                <mu-col span="12" sm="4">
                    <div class="grid-cell">
                        <div class="loginBox">
                            <div class="loginBox_title">
                                欢迎使用
                                <span class="logo">Twinkle</span>
                            </div>
                            <div class="loginBox_slogan">路漫漫其修远兮。</div>
                            <mu-form ref="loginForm" :model="loginForm" class="mu-demo-form">
                                <mu-form-item
                                    label="Username"
                                    label-float
                                    prop="username"
                                    :rules="usernameRules"
                                >
                                    <mu-text-field
                                        v-model="loginForm.username"
                                        prop="username"
                                        
                                    ></mu-text-field>
                                </mu-form-item>
                                <mu-form-item
                                    label="Password"
                                    label-float
                                    prop="password"
                                    :rules="passwordRules"
                                >
                                    <mu-text-field
                                        type="password"
                                        v-model="loginForm.password"
                                        prop="password"
                                    ></mu-text-field>
                                </mu-form-item>
                                <div style="text-align: right;">
                                    <Loading-Btn
                                        text="登录"
                                        :btnStatus="loginBtnStatus"
                                        @handleClick="toLogin()"
                                    ></Loading-Btn>
                                </div>
                            </mu-form>
                        </div>
                    </div>
                </mu-col>
                <mu-col span="12" sm="8">
                    <div class="grid-cell">
                        <div class="loginImg"></div>
                    </div>
                </mu-col>
            </mu-row>
        </div>
    </div>
</template>

<script>
import LoadingBtn from "@/components/LoadingBtn.vue";
export default {
    name: "Login",
    data() {
        return {
            usernameRules: [
                { validate: (val) => !!val, message: "必须填写用户名" },
                /* {
                    validate: (val) => val.length >= 3,
                    message: "用户名长度大于3",
                }, */
            ],
            passwordRules: [
                { validate: (val) => !!val, message: "必须填写密码" },
                /* {
                    validate: (val) => val.length >= 3 && val.length <= 10,
                    message: "密码长度大于3小于10",
                }, */
            ],
            loginForm: {
                userName: "",
                passWord: "",
            },
            loginBtnStatus: false,
        };
    },
    components: {
        LoadingBtn,
    },
    mounted() {
        console.log(this.$store.states.message);
    },
    methods: {
        toLogin() {
            this.$refs.loginForm.validate().then((result) => {
                console.log("form valid: ", result);
                if (result) {
                    let _this = this;
                    _this.loginBtnStatus = true;
                    setTimeout(() => {
                        _this.$swal({
                            text: "登录成功",
                            type: "success",
                        });
                        this.$store.mutations.setMessage("是dad撒所");
                        _this.$router.push("/index");
                    }, 1000);
                }
            });
        },
    },
};
</script>

<style scoped lang="less">
#loginPage {
    height: 100%;
    .loginBox {
        background: #ffffff;
        height: 100vh;
        padding: 120px 10% 0 10%;
        .loginBox_title {
            font-size: 2vw;
            margin-bottom: 8px;
            .logo {
                font-weight: bold;
            }
        }
        @media (max-width: 576px) {
            .loginBox_title {
                font-size: 10vw;
            }
        }
        .loginBox_slogan {
            color: #98a6ad;
            margin-bottom: 50px;
        }
        .formGroup {
            margin-bottom: 35px;
            > label {
                text-align: left;
            }
        }
    }
    .loginImg {
        background-image: url("../../assets/img/timg1.jpg");
        height: 100vh;
        background-position: 0 0%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        animation: walkY 20s linear infinite forwards alternate;
    }
    @keyframes walkY {
        0% {
            background-position: 0 0%;
        }
        100% {
            background-position: 100% 100%;
        }
    }
}
</style>
